<template>
	<view>
		<!-- 热门搜索标签 -->
		<uni-section title="热门搜索" style="height: 100px;">
			<view class="col">
				<view>
					<uni-tag :inverted="true" text="昆明" type="primary" @click="setSearchInput('昆明')" />
				</view>
				<view>
					<uni-tag :inverted="true" text="曲靖" type="success" @click="setSearchInput('曲靖')" />
				</view>
				<view>
					<uni-tag :inverted="true" text="大理" type="warning" @click="setSearchInput('大理')" />
				</view>
				<view>
					<uni-tag :inverted="true" text="呈贡" type="error" @click="setSearchInput('呈贡')" />
				</view>
				<view>
					<uni-tag :inverted="true" text="香格里拉" @click="setSearchInput('香格里拉')" />
				</view>
			</view>
		</uni-section>

		<uni-section v-show="true"  v-for="n in 5">
			<uni-card title="基础卡片" sub-title="副标题" :extra="extra" :thumbnail="avatar" @click="onClick">
				<text>这是一个带头像和双标题的基础卡片，此示例展示了一个完整的卡片。</text>
			</uni-card>
		</uni-section>


	</view>
</template>

<script>
	export default {
		onNavigationBarSearchInputChanged(e) {
			this.searchInput = e.text
		},
		// 搜索框回车
		onNavigationBarSearchInputConfirmed() {
			console.log(this.searchInput)
		},
		// 点击搜索按钮
		onNavigationBarButtonTap() {
			console.log(this.searchInput)
		},

		data() {
			return {
				searchInput: '',

				// 热们搜索标签为空心
				inverted: false,
				
				// 卡片图标
				avatar: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png',
				extra:'昆明'
			}
		},
		methods: {
			// 热门搜索标签
			setSearchInput(text) {
				console.log(text)
			},
			onClick(){
					console.log('啊手动阀')
			},
		}
	}
</script>

<style>
	.col {
		display: flex;
		margin: 20px;
	}

	.uni-tag {
		margin-left: 15px;
	}
</style>
